body, p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
}
.clearfix {
  clear: both;
}
$color1: rgba(34, 185, 171, 1);
$innerColor: rgba(247,253,251,1);

.remind {
  color: #F64A40;
  font-weight: 400;
  text-shadow: 0 0 #F64A40;
}
.before-three {
  color: #F5A623;
  font-weight: 600;
  text-shadow:  0 0 #F5A623;
}
#app {
  width: 100%;
  padding-bottom: .373333rem;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  background:linear-gradient(183deg,rgba(203,238,230,1) 0%,rgba(215,240,233,1) 100%);
  >.bg {
    position: absolute;
    top: 0;
    z-index: -1;
  }
  >.range {
    width:4.666667rem;
    height:.56rem;
    background:rgba(255,255,255,1);
    opacity:0.75;
    margin:  0 auto;
    font-weight:600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6.053333rem;
    color:rgba(34,185,171,1);
  }
  >.gift {
    width: 90.13%;
    background-color: $color1;
    border-radius: .48rem;
    box-sizing: border-box;
    padding: 3.2%;
    margin: 0 auto;
    position: relative;

    >.inner {
      width: 100%;
      height: 100%;
      background-color: $innerColor;
      box-shadow:0 .026667rem .24rem 0 rgba(42,226,185,1),0 .106667rem .16rem 0px rgba(170,230,216,1);
      border-radius: .266667rem;
      overflow: hidden;
      >.box-desc {
        width: 92.68%;
        font-weight:400;
        color:rgba(100,100,100,1);
        margin: 1.173333rem auto 0;
        word-break: break-all; 
        word-wrap:break-word;
      } 
    }

    .title {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -3.52rem;
      margin-top: -0.64rem;
      width: 7.04rem;
      height: 1.386667rem;
      background:rgba(34,185,171,1);
      box-shadow:0 .053333rem .106667rem 0 rgba(80,227,194,1),0 .026667rem .373333rem 0 rgba(80,227,194,1);
      border-radius:.586667rem;
      font-weight: 600;
      color:rgba(255,255,255,1);

      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  >.box-1 {
    height: 14.64%;
    margin-top: .933333rem;
    >.inner {
      height: 92.55%;
      padding-bottom: 7.72%;
    }
  }

  .inner>.box-1-img {
    width: 29.3%;
    height: 30.54%;
    margin: 0 auto;
    display: block;
  }
  .inner>.box-1-desc-1,.inner>.box-1-desc-2 {
    color:rgba(12,150,143,1);
    font-weight: 500;
    text-align: center;
  }
  .inner>.box-1-desc-1 {
    margin-top: 0.91%;
  }

  >.box-2 {
    height: 22.74%;
    margin-top: 1.04rem;
    >.inner {
      padding-bottom: 6.49%;
    }
    >.inner>.box-item {
      width: 33.33%;
      float: left;
      text-align: center;
      margin-top: .373333rem;
      >.gift-img {
        width: 1.866667rem;
        // padding-bottom: 75%;
        height: 1.866667rem;
        // background-color: rgba(216, 216, 216, 1);
        margin:  0 auto;
        border-radius: .066667rem;
        position: relative;
        >.new {
          width: .506667rem;
          height: .293333rem;
          color:rgba(255,255,255,1);
          // font-weight: 400;
          position: absolute;
          right: 0;
          top: 0;
          background:linear-gradient(102deg,rgba(247,151,30,1) 0%,rgba(255,210,0,1) 100%);
          border-radius:0 .106667rem 0 .133333rem;
        }
      }
      >.gift-desc {
        font-weight: 400;
        color: rgba(12, 150, 143, 1);
        margin-top: .266667rem;
        white-space: nowrap;
      }
    }
  }

  >.box-3 {
    height: 14.64%;
    margin-top: .986667rem;
    >.inner {
      padding-bottom: 7.72%;
    }
    .box-3-img {
      width: 26.75%;
      height: 31.88%;
      margin: 0 auto;
      display: block;
    }
  }

  >.ranking {
    height: 15.2rem;
    margin-top: .986667rem;
    margin-bottom: .053333rem;

    >.inner>ul {
      width: 93.63%;
      height: 1.12rem;
      border-radius: .56rem;
      border: .026667rem solid rgba(34, 188, 171, 1);
      display: flex;
      align-items: center;
      margin: 1.013333rem auto .533333rem;
      padding: .08rem;
      box-sizing: border-box;
      >li {
        width: 33.33%;
        font-size: .426667rem;
        color: rgba(12, 150, 143, 1);
        float: left;
        text-align: center;
      }
      >.active-btn {
        width: 33.33%;
        height: .96rem;
        background:linear-gradient(90deg,rgba(71,221,213,1) 0%,rgba(34,185,171,1) 100%);
        border-radius: .56rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
    }
    table>tbody {
      display: block;
      overflow-y: scroll;
      max-height: 11.266667rem;
    }
    table thead {
      margin-bottom: .266667rem;
    }
    table thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    table td {
      white-space: nowrap;
      overflow: hidden;
      width: 25%;
      &:nth-child(2), &:nth-child(3) {
        width: 20%;
      }
      &:nth-child(4) {
        width: 35%;
      }
    }
    table>thead>tr>td {
      // width: 25%;
      text-align: center;
      font-weight:400;
      color:rgba(12,150,143,1);
      text-shadow: 0 0 rgba(12,150,143,1);
    } 
    table>tbody>tr {
      margin-bottom: .533333rem;
    }
    table>tbody>tr>td{
      text-align: center;
      &:nth-child(3) {
        text-align: left;
      }
      .head-img {
        width: 1.066667rem;
        height: 1.066667rem;
        border-radius: 100%;
      }
    }
  }

  >.desc {
    width: 85.33%;
    font-weight: 300;
    color: rgba(34, 187, 172, 1);
    margin:  0 auto;
  }
}
[data-dpr="1"] {
  .desc {
    font-size: 12px;
    line-height: 17px;
  }

  .title {
    font-size: 24px;
    line-height: 33px;
  }

  .inner>.box-desc {
    font-size: 18px;
    line-height: 25px;
  }

  .inner>.box-1-desc-1, .inner>.box-1-desc-2 {
    font-size: 18px;
    line-height: 25px;
  }

  .inner>.box-item>.gift-desc,.inner>.box-item>.gif-day {
    font-size: 14px;
    line-height: 20px;
  }
  .new {
    font-size: 8px;
    line-height: 11px;
  }
  table>thead>tr>td {
    font-size: 14px;
  }
  table>tbody>tr>td {
    font-size: 12px;
  }

  .range {
    font-size: 10px;
    line-height:14px;
  }
}
[data-dpr="2"] {
  .desc {
    font-size: 24px;
    line-height: 34px;
  }

  .title {
    font-size: 48px;
    line-height: 66px;
  }

  .inner>.box-desc{
    font-size: 36px;
    line-height: 50px;
  }

  .inner>.box-1-desc-1, .inner>.box-1-desc-2 {
    font-size: 36px;
    line-height: 50px;
  }
  .inner>.box-item>.gift-desc,.inner>.box-item>.gif-day {
    font-size: 28px;
    line-height: 40px;
  }
  .new {
    font-size: 16px;
    line-height: 22px;
  }
  table>thead>tr>td {
    font-size: 28px;
  }
  table>tbody>tr>td {
    font-size: 24px;
  }
  .range {
    font-size: 20px;
    line-height:28px;
  }
}
[data-dpr="3"] {
  .desc {
    font-size: 24px;
    line-height: 34px;
  }

  .title {
    font-size: 48px;
    line-height: 66px;
  }

  .inner>.box-desc{
    font-size: 36px;
    line-height: 50px;
  }

  .inner>.box-1-desc-1, .inner>.box-1-desc-2 {
    font-size: 36px;
    line-height: 50px;
  }
  .inner>.box-item>.gift-desc,.inner>.box-item>.gif-day {
    font-size: 28px;
    line-height: 40px;
  }
  .new {
    font-size: 16px;
    line-height: 22px;
  }
  table>thead>tr>td {
    font-size: 28px;
  }
  table>tbody>tr>td {
    font-size: 24px;
  }
  .range {
    font-size: 20px;
    line-height:28px;
  }
}